<template>
  <div class="ipranTable">
    <el-table
      v-loading="tableLoading"
      :data="tableData"
      stripe
      border
      fit
      size="mini"
      highlight-current-row
      style="width: 100%"
      class="app-table"
      :header-cell-style="{background:'#eef1f6',color:'#606266'}"
      header-cell-class-name="headercell"
      cell-class-name="cellclazz"
      @selection-change="handleSelectionChange">
      <!-- 暂无数据 -->
      <!-- <template slot="empty">
        <img class="data-pic" src="@/assets/img/tableEmpty.png"/>
        <div class="noDataTxt">暂无数据</div>
      </template> -->
      <!-- 选择框 -->
      <slot name="selection"></slot>
      <!-- 序号 -->
      <slot name="index"></slot>
      <el-table-column
        align="center"
        show-overflow-tooltip
        v-for="(item, index) in fields"
        :key="index"
        :label="item.label"
        :prop="item.key"
        :index="index"
        :width="item.width"
        :sortable="item.sort"
        :filters="item.filters && filterList"
      >
      </el-table-column>
      <!-- 功能操作 -->
      <slot name="operation"></slot>
    </el-table>
  </div>
</template>

<script>
export default {
  name: 'DynamicTable',
  data() {
    return {
      selectEntries: [], // 表格多选选中项目
      tableLoading: false,
    }
  },
  props: {
    // 表格条目名称
    fields: {
      type: Array,
      default() {
        return []
      },
    },
    // 表格数据
    tableData: {
      type: Array,
      default() {
        return []
      },
    },
  },
  methods: {
    // 表格多选框选中的条目
    handleSelectionChange(val) {
      this.$emit('update:tableSelectedChange',val)
    },
  },
  watch: {},
}
</script>

<style lang="scss" scoped>
.noDataTxt{
  margin-top:-30px;
}
</style>